<template>
  <div class="articleDetail-container">
    <Search></Search>
    <MainNavList></MainNavList>
    <section
      class="article-view"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <!-- 头部 -->
      <div class="header">
        <div class="top-text">
          <i class="traingle"></i>
          <span>{{ articleDetailObject.articlePersonalCategoryName }}</span>
        </div>
        <h1 class="title">{{ articleDetailObject.subject }}</h1>
        <div
          @click="goSpace(author.authorId)"
          class="author"
          v-if="
            articleDetailObject.userBlock && articleDetailObject.publishDate
          "
        >
          <img :src="author.authorAvatar" />
          <span class="author-name">{{
            articleDetailObject.userBlock.nickName
          }}</span>
          <span class="write-time">{{
            articleDetailObject.publishDate.split('T')[0]
          }}</span>
        </div>
      </div>
      <!-- 主体 -->
      <div class="content">
        <!-- 左侧推荐收藏 -->
        <div class="left-menu">
          <div class="left-menu-item">
            <img
              src="https://www.ituring.com.cn/img/recommend-icon2.9aff01a8.svg"
            />
            <div class="text">推荐</div>
            <span class="count">{{ articleDetailObject.voteCount }}</span>
          </div>
          <div class="left-menu-item">
            <img src="https://www.ituring.com.cn/img/fav-icon.967a3440.svg" />
            <div class="text">收藏</div>
            <span class="count">{{ articleDetailObject.favCount }}</span>
          </div>
        </div>
        <!-- 右侧主体 -->
        <div class="content-main">
          <!-- 文章内容 -->
          <article class="article-content">
            <div v-html="articleDetailObject.htmlOfBody"></div>
          </article>
          <!-- 文章标签 -->
          <div class="tags-view">
            <div
              class="tag-item"
              v-for="item in articleDetailObject.tags"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- 相关图书 -->

          <RelatedBooks
            :relatedBooks="articleDetailObject.relatedBooks"
          ></RelatedBooks>
          <!-- 文章评价 -->
          <BookComment :detailComments="detailComments"></BookComment>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import RelatedBooks from './RelatedBooks'
import BookComment from './BookComment'
// 文章详情基本样式
import '../ArticlePage/static/css/aliplayer-min.css'
import '../ArticlePage/static/css/app.e0aaa1e1.css'

import Search from '../../components/Search'
import MainNavList from '../../components/MainNavList'

import {
  reqGetArticleDetail,
  reqGetArticleDetailComment
} from '../../utils/api'

import { mapState } from 'vuex'

export default {
  name: 'ArticleDetail',
  async mounted() {
    this.loading = true
    // 保存一份文章ID到Data
    this.articleId = this.$route.params.articleId
    const { articleId } = this
    // 发送具体文章请求
    const detail = await reqGetArticleDetail({
      url: `/Article/${articleId}`,
      params: {
        id: articleId
      }
    })
    // 发送文章详情的评论
    const detailComments = await reqGetArticleDetailComment({
      url: `/Article/Comment/`,
      params: {
        id: articleId
      }
    })

    this.articleDetailObject = detail
    this.detailComments = detailComments

    this.loading = false
  },
  data() {
    return {
      // 文章ID
      articleId: 1,
      //文章具体内容
      articleDetailObject: {},
      //发送文章详情的评论
      detailComments: {},
      loading: false
    }
  },
  components: {
    RelatedBooks,
    BookComment,
    Search,
    MainNavList
  },
  computed: {
    ...mapState({
      author: (state) => state.article.author
    })
  },
  methods: {
    // 跳转个人主页
    goSpace(authorId) {
      this.$router.history.push({
        name: 'Space',
        params: {
          userId: authorId
        }
      })
    }
  }
}
</script>

<style scoped>
.searchComtainer {
  background: #fff;
  left: 180px;
  width: 1300px;
}

.articleDetail-container {
  width: 1080px;
  margin: 70px 133px 0px 304px;
  /* background: rgb(246, 247, 247); */
}
.article-view {
  padding: 0 54px;
}
/* 头部 */
.article-view .header {
  margin: 24px 0 48px;
}
.header .top-text {
  display: flex;
  align-items: center;
}
.header .top-text .traingle {
  border-left: 8px solid #4684e2;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: none;
  /* display: block; */
  width: 0;
  height: 0;
}
.header .top-text span {
  font-size: 14px;
  margin-left: 5px;
  color: #5f77a6;
}
.header .title {
  margin: 16px 0 24px;
  color: #152844;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
}
.header .author {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
.header .author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  display: inline-block;
}
.author .author-name {
  font-weight: 500;
  height: 22px;
  line-height: 22px;
  color: #152844;
  white-space: nowrap;
  margin-right: 16px;
}
.author .write-time {
  color: #6f6f6f;
}

/* 主体 */
/* 左侧推荐收藏 */
.article-view .content {
  display: flex;
  position: relative;
}
.content > .left-menu {
  width: 110px;
  position: sticky;
  max-height: 400px;
  top: 100px;
}
.left-menu .left-menu-item {
  width: 32px;
  height: 66px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.left-menu-item img {
  width: 32px;
  height: 32px;
}
.left-menu-item .text {
  color: #6f6f6f;
  font-size: 12px;
  white-space: nowrap;
}
.left-menu-item .count {
  color: #152844;
  font-weight: 600;
  font-size: 14px;
}

/* 右侧主体 */
.content-main {
  width: 722px;
}
/* 通过JS给code标签加上 以下样式*/
code {
  display: block;
  overflow-x: auto;
  background: #1d1f21;
  color: #c5c8c6;
  padding: 0.5em;
}
/* 文章标签 */

.content-main .tags-view {
  height: 30px;
  margin: 40px 0;
  display: flex;
}
.tags-view .tag-item {
  margin-right: 8px;
  padding: 0 16px;
  border: 1px solid #a1adc5;
  background: #fff;
  color: #152844;
  font-size: 14px;
  height: 30px;
  line-height: 28px;
  border-radius: 16px;
  cursor: pointer;
}
</style>
